<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="新增支付券"
      :ghost="false"
      @back="() => $router.go(-1)"
    ></a-page-header>

    <page-header-wrapper>
      <a-card :bordered="false">
        <a-form-model
          ref="alipayForm"
          :model="alipayForm"
          :rules="alipayRules"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 11 }"
        >
          <a-form-model-item label="小程序" prop="id">
            <a-select placeholder="请选择小程序" v-model="alipayForm.id" >
              <a-select-option :value="item.id" v-for="item of idList" :key="item.id">
                {{ item.app_name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="优惠券名称" prop="name">
            <a-input  v-model="alipayForm.name" placeholder="请输入优惠券名称"></a-input>
          </a-form-model-item>

          <a-form-model-item label="周期限领" prop="quantity_limit_per_user_period_type">
            <a-select placeholder="请选择周期" v-model="alipayForm.quantity_limit_per_user_period_type" >
              <a-select-option :value="item.value" v-for="item of quantity_limit_per_user_period_type" :key="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="每人领取限制" prop="quantity_limit_per_user">
            <a-input-number  placeholder="请输入" :precision="0" :min="0" v-model="alipayForm.quantity_limit_per_user" />
          </a-form-model-item>

          <a-form-model-item label="优惠券类型" prop="discount_type">
            <a-radio-group v-model="alipayForm.discount_type" >
              <a-radio :value="2"> 满减券 </a-radio>
              <!-- <a-radio :value="1"> 折扣券 </a-radio> -->
            </a-radio-group>
          </a-form-model-item>

          <a-form-model-item
            help="优惠券只能抵消商品金额，不能抵消运费，商品金额最多优惠到0.01元"
            label="优惠金额"
            prop="sub_price"
            v-if="alipayForm.discount_type === 2"
          >
            <a-input-number
              placeholder="优惠金额"
              :formatter="value => `${value}元`"
              :parser="value => value.replace('元', '')"
              :min="0"
              :precision="2"
              :step="0.01"
              v-model="alipayForm.sub_price"
              
            />
          </a-form-model-item>
          <a-form-model-item
            v-if="alipayForm.discount_type === 1"
            label="折扣率"
            prop="discount"
            help="如打8.5折请填写8.5，如不打折请填写10 支持折扣率0.1-10"
          >
            <a-input-number
              placeholder="折扣率"
              :formatter="value => `${value}折`"
              :parser="value => value.replace('折', '')"
              :min="0"
              :max="10"
              :precision="1"
              :step="0.1"
              v-model="alipayForm.discount"
              
            />
          </a-form-model-item>

          <a-form-model-item
            help="购物金额（不含运费）达到最低消费金额才可使用优惠券，无门槛优惠券请填0"
            label="最低消费金额"
            prop="min_price"
          >
            <a-input-number
              placeholder="最低消费金额"
              :formatter="value => `${value}元`"
              :parser="value => value.replace('元', '')"
              :min="0"
              :precision="2"
              :step="0.01"
              v-model="alipayForm.min_price"
              
            />
          </a-form-model-item>

          <a-form-model-item label="到期类型" prop="expire_type">
            <a-radio-group v-model="alipayForm.expire_type" >
              <a-radio :value="1"> 领取后N天内有效 </a-radio>
              <a-radio :value="2"> 时间段 </a-radio>
            </a-radio-group>
          </a-form-model-item>

          <template v-if="alipayForm.expire_type === 1">
            <a-form-model-item label="有效天数" prop="expire_day">
              <a-input-number  placeholder="有效天数" :precision="0" :min="0" v-model="alipayForm.expire_day" />
            </a-form-model-item>
          </template>
          <a-form-model-item v-else label="有效期范围" prop="expire_date">
            <a-range-picker  
              format="YYYY-MM-DD HH:mm:ss"
              valueFormat="YYYY-MM-DD HH:mm:ss" 
              v-model="alipayForm.expire_date" />
          </a-form-model-item>

          <a-form-model-item
            label="等待时间"
            prop="wait_days_after_receive"
            help="相对时间，用户领券后需要等待N天，券才可以生效"
            v-if="alipayForm.expire_type === 1"
          >
            <a-input-number
              placeholder="等待时间"
              :precision="0"
              :min="0"
              
              v-model="alipayForm.wait_days_after_receive"
            />
          </a-form-model-item>
          <!-- <a-form-model-item label="是否可线上领取" prop="is_join">
            <a-radio-group v-model="alipayForm.is_join">
              <a-radio :value="1"> 否 </a-radio>
              <a-radio :value="2"> 是 </a-radio>
            </a-radio-group>
          </a-form-model-item> -->
          <!-- <a-form-model-item v-if="alipayForm.is_join === 2" label="发放总数" prop="total_count">
            <a-input-number placeholder="发放总数" :min="-1" v-model="alipayForm.total_count" />
          </a-form-model-item> -->
          <!-- <a-form-model-item v-if="alipayForm.is_join === 1" label="是否支付宝商家券" prop="is_alipay_voucher">
            <a-radio-group v-model="alipayForm.is_alipay_voucher">
              <a-radio :value="1"> 是 </a-radio>
              <a-radio :value="0"> 否 </a-radio>
            </a-radio-group>
          </a-form-model-item> -->

          <a-form-model-item label="排序" prop="sort">
            <a-input-number placeholder="排序" :min="0" v-model="alipayForm.sort"  />
          </a-form-model-item>
<!-- 
          <a-form-model-item label="商品名称" prop="goods_name">
            <div class="flex">
              <a-input :readOnly="true" v-model="alipayForm.goods_name" > </a-input>
              <a-button type="primary"  @click="selectGoodsModal">选择商品</a-button>
            </div>
          </a-form-model-item> -->

          <!-- <a-form-model-item label="券可用商品概要描述" prop="goods_description">
            <a-textarea  :rows="2" placeholder="请输入券可用商品概要描述" v-model="alipayForm.goods_description" />
          </a-form-model-item> -->

          <a-form-model-item label="券数量" prop="quantity">
            <a-input-number  placeholder="券数量" :min="0" :precision="0" v-model="alipayForm.quantity" />
          </a-form-model-item>

          <a-form-model-item label="最大优惠金额" prop="ceiling_amount">
            <a-input-number
              placeholder="最大优惠金额"
              :formatter="value => `${value}元`"
              :parser="value => value.replace('元', '')"
              :min="0"
              :precision="2"
              :step="0.01"
              v-model="alipayForm.ceiling_amount"
              
            />
          </a-form-model-item>

          <!-- <a-form-model-item label="是否可转赠" prop="is_give">
            <a-radio-group v-model="alipayForm.is_give">
              <a-radio :value="1"> 是 </a-radio>
              <a-radio :value="0"> 否 </a-radio>
            </a-radio-group>
          </a-form-model-item> -->

          <a-form-model-item label="使用说明" prop="rule">
            <a-textarea  :rows="2" placeholder="请输入使用说明" v-model="alipayForm.rule" />
          </a-form-model-item>

          <a-form-model-item label="发放时间" prop="publish_start_time">
            <a-range-picker
              allowClear
              format="YYYY-MM-DD HH:mm:ss"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              :placeholder="['开始时间', '结束时间']"
              v-model="queryTime"
              @change="changeTime"
            />
          </a-form-model-item>

          <a-form-model-item label="商户品牌名称" prop="voucher_display_pattern_info.brand_name">
            <a-input
              v-model="alipayForm.voucher_display_pattern_info.brand_name"
              placeholder="请输入商户品牌名称"
              
            ></a-input>
          </a-form-model-item>

          <a-form-model-item label="客服电话" prop="voucher_display_pattern_info.customer_service_mobile">
            <a-input
              v-model="alipayForm.voucher_display_pattern_info.customer_service_mobile"
              placeholder="请输入客服电话"
              
            ></a-input>
          </a-form-model-item>

          <a-form-model-item label="封面图片" prop="voucher_display_pattern_info.voucher_image">
            <cyyUploadImg
              @uploadSuccess="e => (alipayForm.voucher_display_pattern_info.voucher_image = e.data)"
              @deleteImg="alipayForm.voucher_display_pattern_info.voucher_image = ''"
              :imgSrc="alipayForm.voucher_display_pattern_info.voucher_image"
              imgSizeText="670*335"
              
            >
            </cyyUploadImg>
          </a-form-model-item>

          <a-form-model-item label="详情图片" prop="voucher_display_pattern_info.voucher_detail_images">
            <cyyUploadImg
              @uploadSuccess="e => (alipayForm.voucher_display_pattern_info.voucher_detail_images = e.data)"
              @deleteImg="alipayForm.voucher_display_pattern_info.voucher_detail_images = ''"
              :imgSrc="alipayForm.voucher_display_pattern_info.voucher_detail_images"
              imgSizeText="600*600"
              
            >
            </cyyUploadImg>
          </a-form-model-item>

          <a-form-model-item label="券详情" prop="voucher_display_pattern_info.voucher_description">
            <a-textarea
              :rows="2"
              placeholder="请输入券详情"
              
              v-model="alipayForm.voucher_display_pattern_info.voucher_description"
            />
          </a-form-model-item>

          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button v-loading="btnLoading" type="primary" @click="onSubmit"> 提交 </a-button>
            <a-button style="margin-left: 10px" @click="$router.go(-1)"> 取消 </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </page-header-wrapper>

    <SelectGoods v-model="select_goods_visible" @onOk="selectGoodsOk"></SelectGoods>
  </div>
</template>

<script>
import { voucherCreate } from '@/api/marketing/alipayPromotion'
import { alipayList } from '@/api/setting/applet'
import SelectGoods from '@/components/SearchGoods/index'
import { cyyUploadImg } from '@/components/CyyUi/index'
import storage from 'store'

export default {
  components: {
    SelectGoods,
    cyyUploadImg
  },

  data() {
    return {
      serviceList: [],
      btnLoading: false,
      idList: [],
      materialList: [],
      queryTime: [],

      alipay_activity_id:"",

      alipayForm: {
        goods_ids:[],
        id: '',
        quantity_limit_per_user_period_type:'LIFE_CYCLE',
        quantity_limit_per_user:'1',
        publish_start_time: '',
        publish_end_time: '',
        name: '',
        discount_type: 2,
        ceiling_amount: '0',
        sub_price: '0',
        discount: '10',
        min_price: '0',
        wait_days_after_receive: '0',
        expire_type: 1,
        expire_day: '0',
        total_count: '-1',
        expire_date: [],
        is_join: 2,
        is_alipay_voucher: '0',
        sort: '0',
        goods_name: '',
        goods_description: '',
        is_give: 0,
        rule: '',
        voucher_display_pattern_info: {
          brand_name: '',
          customer_service_mobile: '',
          voucher_description: '',
          voucher_image: '',
          voucher_detail_images: ''
        }
      },
      select_goods_visible: false,

      quantity_limit_per_user_period_type:[{
        name:"每天",
        value:"DAY"
      },{
        name:"每周",
        value:'WEEK'
      },{
        name:"每月",
        value:'MONTH'
      },{
        name:"整个活动周期",
        value:'LIFE_CYCLE'
      }],

      alipayRules: {
        quantity_limit_per_user_period_type: [{ required: true, message: '请选择周期限领', trigger: 'change' }],
        id: [{ required: true, message: '请选择小程序', trigger: 'change' }],
        name: [{ required: true, message: '输入优惠券名称', trigger: 'blur' }],
        quantity_limit_per_user: [{ required: true, message: '请输入领取限制', trigger: 'blur' }],
        min_price: [{ required: true, message: '请输入最低消费金额', trigger: 'blur' }],
        discount_type: [{ required: true, message: '请选择优惠券类型', trigger: 'change' }],
        expire_type: [{ required: true, message: '请选择到期类型', trigger: 'change' }],
        discount: [{ required: true, message: '请输入折扣率', trigger: 'blur' }],
        sub_price: [{ required: true, message: '请输入优惠金额', trigger: 'blur' }],
        expire_day: [{ required: true, message: '请输入有效天数', trigger: 'blur' }],
        wait_days_after_receive: [{ required: true, message: '请输入等待时间', trigger: 'blur' }],
        goods_name: [{ required: true, message: '请选择商品', trigger: 'blur' }],
        quantity: [{ required: true, message: '请输入券数量', trigger: 'blur' }],
        ceiling_amount: [{ required: true, message: '请输入最大优惠金额', trigger: 'blur' }],
        expire_date: [{ required: true, message: '请选择有效期范围', trigger: 'change' }],
        is_give: [{ required: true, message: '请选择是否可转赠', trigger: 'change' }],
        publish_start_time: [{ required: true, message: '请选择券发放时间', trigger: 'change' }],
        'voucher_display_pattern_info.brand_name': [{ required: true, message: '请输入商户品牌名称', trigger: 'blur' }],
        'voucher_display_pattern_info.customer_service_mobile': [
          { required: true, message: '请输入客服电话', trigger: 'blur' }
        ],
        'voucher_display_pattern_info.voucher_image': [
          { required: true, message: '请上传封面图片', trigger: 'change' }
        ],
        'voucher_display_pattern_info.voucher_detail_images': [
          { required: true, message: '请上传详情图片', trigger: 'change' }
        ]
      }
    }
  },

  methods: {
    selectGoodsOk(e) {
      if (e && e.length) {
        this.alipayForm.goods_name = e[0].name
        this.alipayForm.goods_ids = [e[0].id]
      }
    },

    selectGoodsModal() {
      this.select_goods_visible = !this.select_goods_visible
    },

    // 切换筛选时间
    changeTime(e) {
      if (e.length) {
        this.alipayForm.publish_start_time = e[0]
        this.alipayForm.publish_end_time = e[1]
      } else {
        this.alipayForm.publish_start_time = ''
        this.alipayForm.publish_end_time = ''
      }
    },

    // 点击提交
    onSubmit() {
      this.$refs.alipayForm.validate(async valid => {
        if (valid) {
          let alipayForm = JSON.parse(JSON.stringify(this.alipayForm))

          console.log('alipayForm,',alipayForm);

          alipayForm.voucher_display_pattern_info.voucher_detail_images = [alipayForm.voucher_display_pattern_info.voucher_detail_images]
          alipayForm.begin_time = alipayForm.expire_date[0]
          alipayForm.end_time = alipayForm.expire_date[1]
          delete alipayForm.expire_date
          this.btnLoading = true
          const res = await voucherCreate(alipayForm)
          this.btnLoading = false

          if (!res.code) {
            this.$message.success(res.msg)
            this.$router.back()
            return
          }

          this.$message.error(res.msg)
        } else {
          return false
        }
      })
    }
  },

  async mounted() {
    const hide = this.$message.loading('请稍等', 0)
    let res = await alipayList()
    if (!res.code && res.data.length) {
      this.idList = res.data
    }
    
    this.alipayForm.voucher_display_pattern_info.brand_name = storage.get('storeName') || ''
    hide()
  }
}
</script>

<style lang="less" scoped>
.flexBox {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  &:last-of-type {
    margin-bottom: 0;
  }

  .inp {
    flex: 1;
  }

  .btn {
    margin-left: 10px;
  }
}

.flex {
  display: flex;
  align-items: center;
}
</style>
